<template>
	<div>
		<el-form
			ref="form"
			:inline="true"
			:model="queryData"
			class="flex-warp-container"
		>
			<el-form-item
				:label="`${$t('common.belong_merchant')}:`"
				class="flex-row-container"
				label-width="77px"
			>
				<merchant-select
					v-model="queryData.merchantId"
				></merchant-select>
			</el-form-item>
			<el-form-item
				:label="
					`${$t('funds.fund_audit.commission_settlement_period')}:`
				"
				class="flex-row-container"
				label-width="103px"
			>
				<el-date-picker
					v-model="searchCycleTime"
					:picker-options="pickerOptionsMonth"
					format="yyyy-MM"
					type="monthrange"
					range-separator="-"
					:start-placeholder="$t('common.start_date')"
					:end-placeholder="$t('common.end_date')"
					:clearable="false"
				></el-date-picker>
			</el-form-item>
			<el-form-item
				:label="`${$t('funds.proxy_member_funds_record.issue_time')}:`"
				class="flex-row-container"
				label-width="77px"
			>
				<el-date-picker
					v-model="searchPayoutTime"
					type="daterange"
					range-separator="-"
					:start-placeholder="$t('common.start_date')"
					:end-placeholder="$t('common.end_date')"
					:picker-options="pickerShortcut2"
					:default-time="['00:00:00', '23:59:59']"
					clearable
				></el-date-picker>
			</el-form-item>
			<el-form-item
				:label="`${$t('funds.proxy_name')}:`"
				class="flex-row-container"
				label-width="77px"
			>
				<el-input
					v-model="queryData.proxyName"
					:placeholder="$t('common.please_enter')"
					clearable
					oninput="value=value.replace(/[\u4E00-\u9FA5]/g ,'')"
					v-symbols
				></el-input>
			</el-form-item>
			<el-form-item
				v-if="tabSign === '1'"
				:label="
					`${$t(
						'funds.proxy_member_funds_record.parent_proxy_account'
					)}:`
				"
				class="flex-row-container"
				label-width="77px"
			>
				<el-input
					v-model="queryData.parentProxyName"
					clearable
					:placeholder="$t('common.please_enter')"
					oninput="value=value.replace(/[\u4E00-\u9FA5]/g ,'')"
					v-symbols
				></el-input>
			</el-form-item>
			<el-form-item
				:label="`${$t('funds.order_no')}:`"
				class="flex-row-container"
				label-width="61px"
			>
				<el-input
					v-model="queryData.orderNo"
					clearable
					:placeholder="$t('common.please_enter')"
					oninput="value=value.replace(/[\u4E00-\u9FA5]/g ,'')"
					v-symbols
				></el-input>
			</el-form-item>
			<!-- <el-form-item
							:label="`${$t('funds.fund_audit.person_rebate')}:`"
							class="flex-row-container"
							label-width="77px"
						>
							<el-input
								v-model="queryData.personRebateAmountMin"
								size="medium"
								clearable
								:placeholder="$t('common.minimum')"
								style="width: 130px"
								maxLength="15"
								v-input="{ name: 'intp' }"
								name="personRebateAmountMin"
								@blur="
									handleAmount(
										queryData,
										1,
										'personRebateAmountMin',
										'personRebateAmountMax',
										$t(
											'funds.fund_audit.person_rebate_tip1'
										)
									)
								"
							></el-input>
							-
							<el-input
								v-model="queryData.personRebateAmountMax"
								size="medium"
								clearable
								:placeholder="$t('common.maximum')"
								style="width: 130px"
								maxLength="15"
								v-input="{ name: 'intp' }"
								name="personRebateAmountMax"
								@blur="
									handleAmount(
										queryData,
										2,
										'personRebateAmountMin',
										'personRebateAmountMax',
										$t(
											'funds.fund_audit.person_rebate_tip2'
										)
									)
								"
							></el-input>
						</el-form-item> -->
			<el-form-item
				v-if="tabSign === '1'"
				:label="
					`${$t('funds.proxy_member_funds_record.client_state')}:`
				"
				class="flex-row-container"
				label-width="91px"
			>
				<el-select
					v-model="queryData.payoutStatus"
					clearable
					:placeholder="$t('common.select_all')"
					:popper-append-to-body="false"
				>
					<el-option
						v-for="item in searchCommissionPayoutStatus"
						:key="item.code"
						:label="item.description"
						:value="item.code"
					></el-option>
				</el-select>
			</el-form-item>
			<el-form-item
				:label="`${$t('funds.fund_audit.adjust_team_commission')}:`"
				class="flex-row-container"
				label-width="120px"
			>
				<el-input
					v-model="queryData.mixCommissionAmount"
					size="medium"
					clearable
					:placeholder="$t('common.minimum')"
					style="width: 130px"
					maxLength="15"
					v-input="{ name: 'float', num: '2' }"
					name="mixCommissionAmount"
					@blur="
						handleAmount(
							queryData,
							1,
							'mixCommissionAmount',
							'maxCommissionAmount',
							$t('funds.fund_audit.commissionAmountMin_warning')
						)
					"
				></el-input>
				-
				<el-input
					v-model="queryData.maxCommissionAmount"
					size="medium"
					clearable
					:placeholder="$t('common.maximum')"
					style="width: 130px"
					maxLength="15"
					v-input="{ name: 'float', num: '2' }"
					name="maxCommissionAmount"
					@blur="
						handleAmount(
							queryData,
							2,
							'mixCommissionAmount',
							'maxCommissionAmount',
							$t('funds.fund_audit.commissionAmountMax_warning')
						)
					"
				></el-input>
			</el-form-item>
			<el-form-item>
				<el-button
					type="primary"
					icon="el-icon-search"
					size="medium"
					:disabled="searchLoading"
					:loading="searchLoading"
					@click="handleSearch"
				>
					{{ $t('common.search') }}
				</el-button>
				<el-button
					icon="el-icon-refresh-left"
					size="medium"
					:disabled="searchLoading"
					@click="handleReset"
				>
					{{ $t('common.reset') }}
				</el-button>
				<el-button
					v-if="hasPermission('90090030')"
					type="warning"
					icon="el-icon-download"
					size="medium"
					:disabled="searchLoading"
					:loading="exportLoading"
					@click="handleExport"
				>
					{{ $t('common.export') }}
				</el-button>
				<el-button
					type="success"
					icon="el-icon-sort"
					:disabled="searchLoading"
					size="medium"
					@click="openColSettings"
				>
					{{ $t('common.row_set') }}
				</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import list from '@/mixins/list'
import { searchCommissionPayoutStatus } from '@/dict/funds'
export default {
	mixins: [list],
	props: {
		searchLoading: {
			type: Boolean,
			default: false
		},
		exportLoading: {
			type: Boolean,
			default: false
		},
		tabSign: {
			type: String,
			default: '0'
		},
		defaultCycleTime: {
			type: Array,
			default: () => {}
		},
		defaultPayoutTime: {
			type: Array,
			default: () => {}
		}
	},
	data() {
		return {
			searchCycleTime: this.defaultCycleTime,
			searchPayoutTime: this.defaultPayoutTime,
			queryData: {
				merchantId: undefined,
				proxyName: undefined,
				parentProxyName: undefined,
				orderNo: undefined,
				payoutStatus: undefined,
				mixCommissionAmount: undefined,
				maxCommissionAmount: undefined
			},
			// 非总代搜索客户端状态
			searchCommissionPayoutStatus
		}
	},
	computed: {},
	watch: {},
	created() {},
	mounted() {},
	methods: {
		handleSearch() {
			this.queryData.searchCycleTime = this.searchCycleTime
			this.queryData.searchPayoutTime = this.searchPayoutTime
			this.$emit('handleSearch', this.queryData)
		},
		handleReset() {
			this.queryData = {}
			this.searchCycleTime = this.defaultCycleTime
			this.searchPayoutTime = this.defaultPayoutTime
			this.$emit('handleReset')
		},
		handleExport() {
			this.$emit('handleExport', this.queryData)
		},
		openColSettings() {
			this.$emit('openColSettings')
		}
	}
}
</script>
